<template>
   <div class="box1">

          <header class="head">

            <div class="h-top">
                 <img @click="tz" src="../../image/1.png" style="width: 32px; height: 32px;" alt="" class="img-left" > <span class="myq">我的钱包</span>
            </div>

            <div class="h-main">
                      <div class="circle">
                    <div class="c1" style="color: #4185e9; font-size: 85px; ">{{ money+moneyall*100 }} </div>
                               <p class="c2" style="color: #4185e9;">H币</p>
                      </div>
            </div>

            <div class="h-m2">
                    <p class="m1">满200H币可提现</p>
            </div>

            <div class="t-bt">
                   <button class="t-b1" @click="reflect">提现</button>
                   <button class="t-b2" @click="recharge">充值</button>
            </div>

          </header>
          <main class="main">

              <div class="m-b" v-for="(item,index) in moneydatalist" :key="index">
                          <div class="m-left">
                              <p class="ml1" style="font-size: 28px;">
                                <span style="font-size: 32px;" class="m-l1">{{ item.remark ? item.remark:'问诊咨询' }}</span>
                                <span style="font-size: 20px; " class="m-l2">{{ item.createTime }}</span>
                              </p>
                          </div>
                          <div class="m-right">
                              <p class="mr1">{{ item.changeNum }}币</p>
                          </div>
                     </div>

          </main>

   </div>

</template>


<script setup lang="ts">
import {onMounted, ref, watchEffect} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
import dayjs from 'dayjs';


const router=useRouter()
const moneydatalist=ref()
const money=ref(0)
const math=ref(999)
const math1=ref(99)
const moneyall=ref(0)



onMounted(() => {
    console.log(1111)
  try {
    const storedData = localStorage.getItem('inputnumber');
    if (storedData) {
  
      const parsedData = JSON.parse(storedData);
   
      if (typeof parsedData === 'number') {
        moneyall.value = parsedData;
      } else {
        console.warn('我的');
        moneyall.value = 0;
      }
    } else {
      console.log('我都唔2');
      moneyall.value = 0;
    }
  } catch (error) {
    console.error('我的3333', error);
    moneyall.value = 0;
  }
});

    
    // console.log(inputmoney,'11112222')
   

    if(money.value.toString().length>3){
        money.value=math.value
    }
      



//获取登录的id
const userId=ref(JSON.parse(localStorage.getItem('userId') || ''))
const sessionId=ref(JSON.parse(localStorage.getItem('sessionId') || ''))

const tz=()=>{
    router.go(-1)
}

const recharge=()=>{
    router.push('/recharge')
}

const reflect=()=>{
    router.push('/reflect')
}

//钱包
const getlist=()=>{
    axios.get('/health/user/verify/v1/findUserWallet',
    {headers:{
        userId:userId.value as number,
        sessionId: sessionId.value as string
    }}
)
    .then((res)=>{
        console.log(res,121212)
        money.value=res.data.result
        if(money.value.toString().length>3){
            money.value=math.value
        }
    })

}
getlist()






// 消费记录
const moneylist=()=>{
    axios.get('/health/user/verify/v1/findUserConsumptionRecordList',
    {

        headers:{
         userId:userId.value as number,
        sessionId:sessionId.value as string
    },
    params:{
        page:1,
        count:10
    }
}
).then((res)=>{
      console.log(res,'消费记录')
      moneydatalist.value=res.data.result
      moneydatalist.value.forEach((item:any,index:number) =>{
      moneydatalist.value[index].createTime=dayjs(item.createTime).format('YYYY-MM-DD')
      })
})
}
moneylist()

// const moneylist=()=>{
//     axios.get('/health/user/verify/v1/findUserConsumptionRecordList',
//     {
//          params:{
//         page:0,
//         count:5
//     },
//         headers:{
//          userId:604,
//         sessionId:"1734485242550604"
//     }
// }
// ).then((res)=>{
//       console.log(res,1122)

// })
// }
// moneylist()



// const getsfzdata=async()=>{
//     await axios.get('/health/user/verify/v1/findUserIdCard',{
//         headers:{
//             userId:userId.value as number,
//             sessionId:sessionId.value as string
//         }
//     }).then(res=>{
//         console.log(res,'身份信息')
//     })
// }
// getsfzdata()



const getsfzdata=async()=>{
    await axios.get('/health/user/verify/v1/findUserIdCard',{
        headers:{
            userId:userId.value as number,
            sessionId:sessionId.value as string
        }
    }).then(res=>{
        console.log(res,'身份信息')
    })
}
getsfzdata()

</script>

<style scoped lang="scss" >
.box1{
    display: flex;
    display: inline-block;
    width: 100%;
    height: 667px; // 1334px * 0.5 = 667px
    background-color: #ccc;
}
.head{
    display: flex;
    display: inline-block;
    width: 375px; // 750px * 0.5 = 375px
    height: 300px; // 600px * 0.5 = 300px
    background-color: #4185e9;
}

.h-top{
    border-top: 0.5px solid #ccc; // 1px * 0.5 = 0.5px
    padding-top: 20px; // 40px * 0.5 = 20px
    width: 100%;
    height: 20px; // 40px * 0.5 = 20px
    margin-top: 3%; // 6% * 0.5 = 3%
}

.myq{
    color: #fff;
    font-size: 15px; // 30px * 0.5 = 15px
    margin-left: 31.5%; // 32% * 0.5 = 16%
}

.img-left{
    margin-left: 6%; // 5% * 0.5 = 2.5%
}

.h-main{
    width: 100%;
    height: 116px; // 232px * 0.5 = 116px

}

.circle{
    display: flex;
    display: inline-block;
    width: 116px; // 232px * 0.5 = 116px
    height: 116px; // 232px * 0.5 = 116px
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    margin-left: 35%; // 34% * 0.5 = 17%
    margin-top: 20px; // 40px * 0.5 = 20px
}

.c1{
    display: flex;
    width: 100%;
    height: 50px; // 100px * 0.5 = 50px
    margin-top: 25px; // 50px * 0.5 = 25px
    margin-left: 20px; // 50px * 0.5 = 25px
}


.h-m2{
    display: flex;
    width: 100%;
    height: 10px; // 20px * 0.5 = 10px
    font-size: 5px; // 10px * 0.5 = 5px
    color: #fff;
    line-height: 5px; // 10px * 0.5 = 5px
    margin-top: 23px; // 46px * 0.5 = 23px
}

.m1{

    width: 100px; // 200px * 0.5 = 100px
    height: 10px; // 20px * 0.5 = 10px
    font-size: 11.5px; // 23px * 0.5 = 11.5px
    color: #bad5f7;
    margin-left: 39%; // 37% * 0.5 = 18.5%
}

.c1{
    display: flex;
    height: 50px; // 100px * 0.5 = 50px
}

.t-bt{
    display: flex;
    width: 100%;
    height: 15px; // 30px * 0.5 = 15px
    margin-top: 30px; // 60px * 0.5 = 30px
}
.t-b1{
    width: 50px; // 100px * 0.5 = 50px
    height: 25px; // 50px * 0.5 = 25px
    border: none;
    background-color: #fff;
    color: #4185e9;
    border-radius: 2.5px; // 5px * 0.5 = 2.5px
    font-size: 12.5px; // 25px * 0.5 = 12.5px
    margin-left: 80px; // 150px * 0.5 = 75px
}
.t-b2{
    width: 50px; // 100px * 0.5 = 50px
    height: 25px; // 50px * 0.5 = 25px
    border: none;
    background-color: #fff;
    color: #4185e9;
    border-radius: 2.5px; // 5px * 0.5 = 2.5px
    font-size: 12.5px; // 25px * 0.5 = 12.5px
    margin-left: 110px; // 240px * 0.5 = 120px
}
.main{

    width: 100%;
    height: 365px; // 730px * 0.5 = 365px
    background-color: #fff;
    margin-top: 5px; // 10px * 0.5 = 5px

}
.m-b{
    display: flex;
    display: inline-block;
    width: 100%;
    height: 65px; // 130px * 0.5 = 65px

}

.m-left{
    float: left;
    width: 77px; // 154px * 0.5 = 77px
    height: 70px; // 140px * 0.5 = 70px
    margin-left: 30px; // 60px * 0.5 = 30px

}
.m-right{
    float: right;
    width: 77px; // 154px * 0.5 = 77px
    height: 50px; // 100px * 0.5 = 50px
    margin-right: 15px; // 30px * 0.5 = 15px
}
.mr1{
    margin-top: 22.5px; // 45px * 0.5 = 22.5px
    color: #4185e9;
    font-size: 15px; // 30px * 0.5 = 15px
}



.m-l1{
    display: flex;

    width: 300px;
    height: 14px;


}
.m-l2{
    display: flex;
    margin-top: 15px; // 40px * 0.5 = 20px
    color: #c0c0bf;
}
</style>
